<!--
 * @Author: zhouyaxue
 * @Date: 2022-11-30 17:39:13
 * @LastEditors: zhouyaxue
 * @LastEditTime: 2023-01-10 09:46:52
-->
<!--  -->
<template>
  <div class="layout-wrapper">
    
    <HeaderOther id="header" :current-logo="currentLogo" :class="router.currentRoute.value.path.indexOf('userCenter') !== -1
      ? 'header-scroll'
      : ''
      "></HeaderOther>
    <div id="main" class="main-wrapper">
      <router-view class="main" />
      <!-- v-if="showFooter" -->
      <Footer v-if="showFooter" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch, onUnmounted, onMounted } from "vue";
import { useRoute } from "vue-router";
import router from "@/router";
import Footer from "./footer.vue";
import HeaderOther from "./headerOther.vue";

const route = useRoute();
const showFooter = ref(false);


// import currentLogoUrl from "@/assets/images/new-logo.png";
import currentLogoUrl from "@/assets/logo.png";

const currentLogo = ref(currentLogoUrl);
function scrollToTop() {
  // const el: any = document.getElementById('main');
  const el: any = document.scrollingElement;
  console.log("scrollToTop:", el.scrollTop);

  let step = 0;
  const interval = setInterval(() => {
    if (el.scrollTop <= 0) {
      clearInterval(interval);
      return;
    }
    step += 10;
    el.scrollTop -= step;
  }, 20);
}

function handleScroll() {
  const top = document.scrollingElement?.scrollTop || 0;
  // const top: any = document.getElementById('main')?.scrollTop;
  const header: any = document.getElementById("header") || {};
  // console.log('top:', top);

  if (route.path === "/newsDetail" || route.path === "/constructorDetail") {
    // 固定白色背景
    // header.style.background = 'rgba(255,255,255)';
    // header.style.color = 'rgba(0,0,0)';
    // header.style.boxShadow = '0 0 12px 0 rgba(0,0,0,.08)';
    // currentLogo.value = require('@/assets/images/logo2.png');
  } else if (top > 50) {
    // header.style.background = 'rgba(255,255,255)';
    // header.style.color = 'rgba(0,0,0)';
    // header.style.boxShadow = '0 0 12px 0 rgba(0,0,0,.08)';
    // currentLogo.value = require('@/assets/images/logo2.png');
  } else {
    // header.style.background = 'rgba(0,0,0,0.4)';
    // header.style.color = 'rgba(255,255,255)';
    // header.style.boxShadow = 'none';
    // currentLogo.value = require('@/assets/images/logo.png');
  }
}
watch(
  () => route.fullPath,
  (val) => {
    if (val.includes("about")) {
      if (route.query.footer !== "1") {
        scrollToTop();
      }
    } else {
      scrollToTop();
    }
  }
);
watch(
  () => route.path,
  (val) => {
    console.log(val, 'route')
    if (val !== "/") {
      showFooter.value = true;
    } else {
      showFooter.value = false;
    }
    // handleScroll();
  },
  {
    immediate: true,
    deep: true,
  }
);

onMounted(() => {
  // window.addEventListener("scroll", handleScroll, true); // 监听页面滚动
  scrollToTop();
  // handleScroll();
});

onUnmounted(() => {
  // window.removeEventListener("scroll", handleScroll); // 监听页面滚动
});
</script>
<style lang="scss" scoped>
.layout-wrapper {
  width: 100%;
  min-width: $center-width;
  height: 100%;
  overflow: auto;
}

.main-wrapper {
  width: 100%;
  min-width: $center-width;
  height: 100%;

  .main {
    min-height: 500px;
  }
}
</style>
